<template>
	<div>
		<!--面包屑导航-->
		<el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 10px;">
			  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			  <el-breadcrumb-item>权限管理</el-breadcrumb-item>
			  <el-breadcrumb-item>角色列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!--卡片-->
		<el-card >
			<!--表头栏，使用栅格系统-->
			<el-row>
				<el-col>
					<el-button type="primary" @click="addDialogVisible = true">添加</el-button>
				</el-col>
			</el-row>
			<el-table :data="roleList2">
				<el-table-column type="expand"></el-table-column>
				<el-table-column label="#" type="index"></el-table-column>
				<el-table-column label="角色名称" prop="roleName"></el-table-column>
				<el-table-column label="角色描述" prop="roleDesc"></el-table-column>
				<el-table-column label="角色操作" prop="">
					<template slot-scope="scope">
						<el-tooltip class="item" effect="dark" content="修改" placement="top-start">
							<el-button type="primary" icon="el-icon-edit" @click="openEdit(scope.row)" circle></el-button>
						</el-tooltip>
						<el-tooltip class="item" effect="dark" content="删除" placement="top-start">
							<el-button type="success" icon="el-icon-delete" @click="openDelete(scope.row)" circle></el-button>
						</el-tooltip>
						<el-tooltip class="item" effect="dark" content="分配权限" placement="top-start">
							<el-button type="warning" icon="el-icon-star-off" circle></el-button>
   		 				</el-tooltip>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		
		<!--添加角色对话窗-->
		 <el-dialog title="添加角色" :visible.sync="addDialogVisible" width="50%"  >
		 	<el-form  :model="Roleform" label-width="80px" :rules="Rules">
		 		<el-form-item label="角色名称" style="width:80%" prop="name">
   					 <el-input v-model="Roleform.name"></el-input>
  			</el-form-item>
  				<el-form-item label="描述" style="width: 80%" prop="desc">
   					 <el-input v-model="Roleform.desc" width="150px"></el-input>
  				</el-form-item>
		 	</el-form>
  				<!--对话框根部-->
			  	<span slot="footer" class="dialog-footer">
			    	<el-button @click="addDialogVisible = false">取 消</el-button>
			    	<el-button type="primary" @click="submitForm(Roleform)">确 定</el-button>
			  	</span>
		 </el-dialog>
		 
		 <!--修改角色权限-->
		 <el-dialog title="修改角色页面" :visible.sync="editDialogVisible" width="50%"  >
		 	<el-form  :model="Roleform" label-width="80px" :rules="Rules">
		 		<el-form-item label="角色名称" style="width:80%" prop="name">
   					 <el-input v-model="Roleform.name"></el-input>
  			</el-form-item>
  				<el-form-item label="描述" style="width: 80%" prop="desc">
   					 <el-input v-model="Roleform.desc" width="150px"></el-input>
  				</el-form-item>
		 	</el-form>
  				<!--对话框根部-->
			  	<span slot="footer" class="dialog-footer">
			    	<el-button @click="editDialogVisible = false">取 消</el-button>
			    	<el-button type="primary" @click="editRole(Roleform)">确 定</el-button>
			  	</span>
		 </el-dialog>
		 
		 <!--对话框删除提示-->
			<el-dialog title="删除提示" :visible.sync="deletedialogVisible" width="30%" >
			  <span>确定删除吗？</span>
			  <span slot="footer" class="dialog-footer">
			    <el-button @click="deletedialogVisible = false">取 消</el-button>
			    <el-button type="primary" @click="deleteRole()">确 定</el-button>
			  </span>
			</el-dialog>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				roleList:[
				{id:1,roleName:'总经理',roleDesc:'未定义'},
				{id:2,roleName:'策划组长',roleDesc:'222'},
				{id:3,roleName:'开发组长',roleDesc:'222'},
				{id:4,roleName:'策划',roleDesc:'222'},
				{id:5,roleName:'开发',roleDesc:'222'},
				{id:6,roleName:'测试组长',roleDesc:'222'},
				{id:7,roleName:'测试',roleDesc:'222'},
				{id:8,roleName:'游客',roleDesc:'222'},
				{id:9,roleName:'管理员',roleDesc:'222'}
				],
				roleList2:[],
				Roleform:{
					id:'',
					name:'',
					desc:''
				},
				
				Rules:{
					name:[
					{required:true,message:'角色名称不能为空',trigger:"blur"},
					{min:3,max:10,message:'长度大于3小于10',trigger:"blur"}
					],
					desc:[
					{required:true,message:'不能为空'},
					{min:3,message:'长度大于3'}]
				},
				addDialogVisible : false,
				editDialogVisible : false,
				deletedialogVisible : false
			}
		},
		created(){
			this.getRoleList();
		},
		inject:['reload'],
		methods:{
			//更新角色列表
			async getRoleList(){
				const {data:res} =await this.$http.get("");
				//`this.roleList2 = null;
				if(res!== null){				
				this.roleList2 = this.roleList;
				console.log(this.roleList2);
				}
			},
			//添加角色事件
			submitForm(res){
				console.log("roleform::::"+res.name);
				//获取最后一个元素的ID
				if(res !== null){					
					let rid = this.roleList[this.roleList.length-1].id+1;
					let role = {id:rid,roleName:res.name,desc:res.roleDesc};
					//将数组放入
					this.roleList.push(role);
					this.addDialogVisible = false;
					return this.$message.success("添加成功！");
				}
				return this.$message.error("无效数据，添加失败！");
			},
			//打开修改角色信息对话框
			openEdit(res){
				this.editDialogVisible = true;
				if(res === null){
					return this.$message.error("数据为空");
				}
				//将对应列的数据同步到对话窗
				this.Roleform.id = res.id;
				this.Roleform.name  = res.roleName,
				this.Roleform.desc = res.roleDesc;
			},
			//执行修改事件
			editRole(res){
				console.log("ressss:"+res.name);
				this.roleList[res.id -1] = {id:res.id,roleName:res.name,roleDesc:res.desc},
				this.editDialogVisible = false;
				this.$message.success("修改成功！");
				console.log('res:'+res);
				return this.getRoleList();
			},
			//打开删除弹出层
			openDelete(res){
				this.deletedialogVisible = true;
				this.Roleform.id = res.id;
			},
			deleteRole(){
				this.roleList.splice(this.Roleform.id-1,1); 
				this.deletedialogVisible  = false

			}
		}
	}
</script>

<style type="less" scoped>
</style>